<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>p48_引出生命周期</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 
			生命周期:
				1.又名:生命周期回调函数、生命周期函数、生命周期钩子
				2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
				3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
				4.生命周期函数中的this指向是vm 或 组件实例对象。
		 -->
	</head>
	<body>
		<div id="root">
			<!-- 这一句代码能不能看出这是什么？
				动态绑定需要写个冒号,如:style
				里面一组一组的需要写成对象。
				前一个opacity是style里面的透明的，后一个是它的值。
				因为key-value相同，可以简写为：:style="{opacity}"
				:style="{opacity:opacity}
			-->
			<h1 :style="{opacity}">欢迎学习Vue</h1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					opacity: 1,
					change10: true
				},
				/*  这里面可以这样写定时器吗？不可以，这里面都是key-value这种格式；
					所以 要放到外面；
					setInterval(() => {
					}, 20)
				 */
				//Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
				mounted() {
					setInterval(() => {
						if (this.change10) { //为什么这里可以用this，因为setInterval用的是箭头函数,箭头函数的this往外找。
							vm.opacity = vm.opacity - 0.001;
							if (vm.opacity <= 0) {
								this.change10 = !this.change10
							}
						} else {
							vm.opacity = vm.opacity + 0.001;
							if (vm.opacity >= 1) {
								this.change10 = !this.change10
							}
						}
					}, 2)
				}
			})

			//通过外部的定时器实现(不推荐)
			/* setInterval(() => {
				vm.opacity = vm.opacity - 0.001;
				if (vm.opacity <= 0) vm.opacity = 1;
			}, 2) 
			*/
		</script>
	</body>
</html>